<!--
	各省（直辖市）危化企业数量统计
	Created by Penglei on 2023/08/17
-->
<template>
	<div class="enterprise-count-statistics">
		<!-- 数据表格 -->
		<div class="enterprise-count-grid">
			<el-table :data="tableData" :border="true" style="width: 100%" max-height="298"
				:cell-style="{ border: '1px solid #475ADB' }"
				:header-cell-style="{ border: '1px solid #475ADB', borderLeft: 'none' }">
				<el-table-column header-align="center" align="center" label="省（直辖市）" prop="province" width="120" />
				<el-table-column header-align="center" align="center" label="小型" prop="small" />
				<el-table-column header-align="center" align="center" label="中型" prop="middle" />
				<el-table-column header-align="center" align="center" label="大型" prop="big" />
			</el-table>
		</div>
	</div>
</template>

<script setup name="EnterpriseCountStatistics">
import { ref } from 'vue';
// 引入接口
import { getEnterpriseCountStatisticsApi } from '@/api/basicData'

// 组件事件监听
const emit = defineEmits();
// 表格数据
let tableData = ref([
	// { province: '北京市', small: 231, middle: 231, big: 231 },
	// { province: '天津市', small: 220, middle: 231, big: 231 },
	// { province: '河北省', small: 195, middle: 231, big: 231 },
	// { province: '山西', small: 193, middle: 231, big: 231 },
	// { province: '内蒙古自治区', small: 189, middle: 231, big: 231 },
	// { province: '辽宁省', small: 184, middle: 231, big: 231 },
	// { province: '吉林省', small: 176, middle: 231, big: 231 },
	// { province: '黑龙江省', small: 172, middle: 231, big: 231 },
	// { province: '上海市', small: 168, middle: 231, big: 231 },
	// { province: '江苏省', small: 161, middle: 231, big: 231 },
	// { province: '浙江省', small: 152, middle: 231, big: 231 },
]);
// 加载数据
const getData = () => {
	tableData.value.length = 0;
	getEnterpriseCountStatisticsApi().then(res => {
		const { code, data } = res;
		if (code == 200 && data) {
			tableData.value = [...data];
		}
	}).catch(err => {
		console.log(err.message);
	})
}
// 挂载完成
onMounted(() => {
	// 加载数据
	getData();
})
</script>

<style lang="scss" scoped>
@import '@/assets/styles/variables.module.scss';

.enterprise-count-statistics {
	padding: 5px;
	color: $white;
	position: relative;

	.enterprise-count-grid {
		width: 100%;
		padding: 10px;

		:deep(.el-table) {
			--el-table-border-color: #475ADB;
			--el-table-border: 1px solid #475ADB;
			--el-table-text-color: $white;
			--el-table-header-text-color: $white;
			--el-table-row-hover-bg-color: transparent;
			--el-table-current-row-bg-color: transparent;
			--el-table-header-bg-color: linear-gradient(#081043 0%, #0B1864 65%, #1D388F 100%);
			--el-table-bg-color: transparent;
			--el-table-tr-bg-color: transparent;

			// 表头
			.el-table__header-wrapper {
				font-size: 16px;

				.el-table__row {
					margin: 0;
					height: 35px;
					line-height: 35px;
				}
			}

			// 表格
			.el-table__body-wrapper {
				font-size: 14px;

				.el-table__body {
					-webkit-border-vertical-spacing: 0; // 垂直间距
				}

				.el-table__row {
					margin: 0;
					height: 23px;
					line-height: 23px;
				}
			}

			.el-table__cell {
				height: 100%;
			}
		}
	}
}
</style>